* {
  margin    : 0;
  padding   : 0;
  box-sizing: border-box;
}

body {
  width           : 100vw;
  min-width       : 900px;
  min-height      : 100vh;
  display         : flex;
  justify-content : center;
  align-items     : center;
  background-color: rgb(64, 115, 245);
}

body::before {
  content   : '';
  position  : absolute;
  top       : 0;
  left      : 0;
  width     : 100%;
  height    : 100%;
  background: linear-gradient(#e91e63, #ffc107);
  clip-path : circle(22% at 30% 20%);
}

body::after {
  content   : '';
  position  : absolute;
  top       : 0;
  left      : 0;
  width     : 100%;
  height    : 100%;
  background: linear-gradient(#fff, #da00ff);
  clip-path : circle(20% at 70% 90%);
}

main {
  width           : 900px;
  height          : 600px;
  position        : relative;
  background-color: rgba(255, 255, 255, 0.05);
  border-radius   : 10px;
  overflow        : hidden;
  backdrop-filter : blur(15px);
  z-index         : 999;
  border          : 1px solid rgba(255, 255, 255, 0.2);
  box-shadow      : 5px 5px 30px rgba(0, 0, 0, .2);
}


// 歌手和歌名
.text-area {
  display        : flex;
  flex-direction : column;
  justify-content: center;
  align-items    : center;
  width          : 100%;
  height         : 100px;
  color          : white;

  .songName {
    font-size  : 28px;
    font-weight: 550;
    user-select: none;
    color      : white;
  }

  .author {
    margin-top : 5px;
    font-size  : 18px;
    user-select: none;
  }
}

//专辑封面
.content {
  width              : 100%;
  height             : 415px;
  // background-color: pink;
  display            : flex;
  // justify-content: space-evenly;
  align-items        : center;


  .cover {
    width          : 300px;
    height         : 300px;
    border-radius  : 150px;
    display        : flex;
    justify-content: center;
    align-items    : center;
    overflow       : hidden;
    margin-left    : 10%;
    box-shadow     : 0 0 10px 3px rgba(0, 0, 0, 0.239);

    img {
      animation           : rotate 20s linear infinite;
      animation-play-state: paused;
      user-select         : none;
    }
  }

  .lyric {
    color      : white;
    font-size  : 18px;
    margin-left: 20%;
    user-select: none;
  }

  @keyframes rotate {
    from {
      transform: rotate(0);
    }

    to {
      transform: rotate(360deg);
    }
  }
}



//进度条
.progress_bar {
  box-sizing         : border-box;
  padding            : 2px 0;
  cursor             : pointer;
  position           : absolute;
  left               : 50%;
  transform          : translateX(-50%);
  bottom             : 70px;
  width              : 100%;
  height             : 2px;
  border-radius      : 4px;
  background-color   : rgb(135, 178, 231);
  // animation       : twinkle 2s linear infinite alternate;



  .time_bar {
    position           : absolute;
    left               : -900px;
    width              : 100%;
    height             : 100%;
    background-color   : rgb(235, 43, 92);
    transition         : all .5s;
    // z-index         : 99;
    cursor             : pointer;
  }

  .time_dot {
    position           : absolute;
    left               : 0px;
    top                : -7px;
    width              : 18px;
    height             : 18px;
    border-radius      : 9px;
    background-color   : rgb(255, 37, 92);
    z-index            : 1001 !important;
    transition         : all .5s;
    // display         : none;
    // transition      : all .5s linear;
  }

  // .progress_bar:hover .time_dot {
  //   display: block;
  // }

}



@keyframes twinkle {
  // 0% {
  //   box-shadow: none;
  // }

  // 10% {
  //   box-shadow: 0px -3px 4px 3px rgba(217, 23, 250, .6);
  // }

  // 20% {
  //   box-shadow:none;
  // }

  // 60% {
  //   box-shadow: 0px -3px 4px 3px rgba(217, 23, 250, .6);
  // }

  // 100% {
  //   box-shadow: none;
  // }

  from {
    // box-shadow: 0px -3px 4px 3px rgba(0, 0, 0, .3);
    box-shadow: none;

  }

  to {
    box-shadow: 0px -3px 4px 3px rgba(217, 23, 250, .6);
  }
}



// 最底下的控制栏
.control_bar {
  position           : absolute;
  bottom             : 0;
  width              : 100%;
  height             : 70px;
  background-color   : rgba(24, 71, 124, 0.52); //9, 52, 163
  // box-shadow      : 0 -1px 5px 2px rgba(0, 0, 0, .5);
  display            : flex;
  justify-content    : center;
  align-items        : center;
  backdrop-filter    : blur(35px);


  //播放时间
  .showTime {
    position   : absolute;
    left       : 5%;
    width      : 230px;
    color      : white;
    user-select: none;
  }

  // 播放 上下首
  .controls {
    width              : 200px;
    // background-color: red;
    display            : flex;
    justify-content    : space-between;
    align-items        : center;

    .control {
      margin         : 0 15px;
      border-radius  : 50%;
      transition     : all .5s ease;
      display        : flex;
      justify-content: center;
      align-items    : center;
    }

    .previous,
    .next {
      width          : 40px;
      height         : 40px;
      border-radius  : 50%;
      overflow       : hidden;
      display        : flex;
      align-items    : center;
      justify-content: center;
      transition     : all .5s ease;
    }

    .previous:hover,
    .next:hover,
    .control:hover {
      background-color: rgb(235, 49, 87);
      border          : 1px solid rgba(255, 255, 255, 0.1);
      box-shadow      : 5px 5px 30px rgba(0, 0, 0, .1);
    }

    .previous img,
    .next img {
      width: 30px;
    }

    img {
      width     : 50px;
      height    : auto;
      transition: all .2s ease-in;
    }
  }

  //音量控制器
  .volume {
    position: absolute;
    right   : 40px;
    display: flex;
    align-items: center;

    img {
      width: 25px;
      height: 25px;
      margin-right: 15px;
    }

    input[type=range] {
      outline           : 1px solid rgba(255,255,255, .2);
      -webkit-appearance: none;
      /*清除系统默认样式*/
      width             : 100% !important;
      background        : linear-gradient(to right, #fa7c9c, #ff0040) no-repeat, transparent;
      // border          : 1px solid rgba(255, 255, 255, 0.2);
      // box-shadow      : 5px 5px 30px rgba(0, 0, 0, .2);
      background-size   : 30% 100%;
      /*设置左右宽度比例*/
      height            : 10px;
      border-radius: 100px;
      /*横条的高度*/
    }

    input[type=range]::-webkit-slider-thumb {
      -webkit-appearance: none;
      /*清除系统默认样式*/
      height            : 16px;
      /*拖动块高度*/
      width             : 16px;
      /*拖动块宽度*/
      background        : #fff;
      /*拖动块背景*/
      border-radius     : 50%;
      /*外观设置为圆形*/
      border            : solid 1px #ddd;
      /*设置边框*/
    }

  }
}